iT邦幫忙

第 11 屆 iThome 鐵人賽

1
自我挑戰組

一步一腳印,探索網頁前端設計之美系列 第 32

第三十二步 - 創造自己的風格(Javascript 函式部分)

  • 分享至 

  • xImage
  •  

大家好,我是喵橘,一轉眼又到了星期四,今天我要報告的是 Javascript 函式部分。

何謂函式?

發現 Javascript 練習到現在,程式碼的內容越來越多嗎?最後就會發現是不是有相似或者相同的程式碼不停再作執行,而且程式看起來雜亂無章,很難做修改與維護,所以,我們把常使用的程式碼放入一個程式區段中,之後就可以重複呼叫使用,而這一個區段就叫做函式

撰寫函式的好處

  1. 將許多的程式碼模組化,並且,具有重複使用性,可以在任何地方去做呼叫,減少程式過多重複性語法所造成負擔。
  2. 簡化程式碼的撰寫,結構上清楚,並能閱讀輕鬆。
  3. 因為每一個函式清楚分別,尋找錯誤特別輕鬆,大大降低程式維護時間成本。

函式如何使用?

基本語法

function 函式名稱 ([參數 1, 參數2,....]) {
    執行的相關程式碼 ; 
    return 傳回處理好的數值 ;
}

呼叫函式的方法:

函數名稱 ([參數 1, 參數2,....]);

基本函式範例

var coin;

function drink (num) {
	if (num > 5) {
		coin = 15;
	}
	else {
		coin = 20;
	}
	
	return num*coin;
}

var num = prompt("需入需要購買飲料的數量(5杯以上有打折):");


if (num > 0) {
	window.alert(drink(num));
}

else {
	window.alert("請輸入正數!!");
}

範例圖示:

https://ithelp.ithome.com.tw/upload/images/20191003/20117282gfA6zXqHb0.png

函式撰寫該注意的事情

  1. 在函式內撰寫 return 指令後,切記不要進行換行,因為,Javascript有自動判斷指令結尾的功能,會自動補上分號,並順利執行。
  2. 函式的命名規則與前面章節所說過的變數相同,不可與其他函式和變數一模一樣。
  3. 函式設定參數部分並沒有強迫要設定。
  4. 回傳值可以用任何形態傳遞。
  5. 函式是一個靜態結構。

明天預告


今天是講解 Javascript函數部分,明天講解 Javascript物件部分,謝謝各位閱讀。


上一篇
第三十一步 - 遇到返回鏡子突襲! (Javascript控制語法)
下一篇
第三十三步 -神秘的箱子 (Javascript 物件部分)
系列文
一步一腳印,探索網頁前端設計之美33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言